<template>
    <div>
      <Top :username="username"></Top>
    <div id="Content">
      <div id="Catalog">
        <form method="post" @submit.prevent="editAccount">
          <h3>User Information</h3>
          <span v-if="messageAccount !== null">
            <p style="color: red">{{ messageAccount }}</p>
          </span>
          <table>
            <tr>
              <td>User ID:</td>
              <td id="username">{{ username }}</td>
            </tr>
            <tr>
              <td>Old password:</td>
              <td>
                <input
                  type="text"
                  id="oldPassword"
                  name="oldPassword"
                  v-model="oldPassword"
                  @blur="checkEmpty(this.oldPassword,'right_oldPassword','wrong_oldPassword','oldpwd_msg','oldPassword')"
                />
                <img
                  id="right_oldPassword"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_oldPassword"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <div id="oldpwd_msg" style="display:none;">旧密码不能为空</div>
              </td>
            </tr>
            <tr>
              <td>New password:</td>
              <td>
                <input
                  type="text"
                  id="password"
                  name="password"
                  v-model="password"
                  @input="checkPwd"
                  @blur="checkEmpty(this.password,'right_password','wrong_password','pwd_msg','password')"
                />
                <img
                  id="right_password"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_password"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <div class="gradebox" id="passbox">
                  <div class="grade all" id="one">&#x5F31;</div>
                  <div class="grade all" id="two">&#x4E2D;</div>
                  <div class="grade all" id="three">&#x5F3A;</div>
                  <div class="grade" id="four">&#x5F88;&#x5F3A;</div>
                </div>
                <div id="pwd_msg" style="display:none;">新密码不能为空</div>
                <!-- <div id="passwordAvailability"></div> -->
              </td>
            </tr>
            <tr>
              <td>Repeat password:</td>
              <td>
                <input
                  type="text"
                  id="repeatedPassword"
                  name="repeatedPassword"
                  v-model="rePassword"
                  @blur="checkRePwd"
               
                />
                <img
                  id="right_repeatedPassword"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_repeatedPassword"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <!-- <div id="repeatedPasswordAvailability"></div> -->
                <div id="repwd_msg">{{ repwd_msg }}</div>
              </td>
            </tr>
          </table>

          <input
            type="submit"
            name="account"
            value="Save Account Information"
          />
        </form>
      </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import Top from '../common/top.vue'
export default {
  name: "editAccount",
  props: {
    username: {
      type: String,
      required: true
    }
  },
  data() {
    return {
        // 下面获取top传来得用户名信息
      username: this.$route.query.username,

      oldPassword:'',
      messageAccount: "",

      repwd_msg:'',
      oldpwd_msg:'',
      oldPassword:'',
      rePassword:'',
      password:''
    };
  },
  components:{
    Top
  },
  methods: {
    editAccount() {
      axios({
        method: "put",
        url: "http://localhost:8080/jpetstore/user/auth",
        data: {//传递账号信息
          oldPassword:this.oldPassword,
          password: this.pwd,
          rePassword: this.rePassword,
        },
      })
        .then((r) => {
          if (r.data.data === "修改成功") {
            this.messageAccount = null
          } else {
            this.messageAccount = r.data.data; //修改失败，传回来错误信息
          }
        })
        .catch((r) => {
          console.log(r);
        });
    },
    checkEmpty(username,el_right_username,el_wrong_username,el_username_msg,el_username){
        if(username===null||username===''){
            document.getElementById(el_right_username).style.display='none'
            document.getElementById(el_wrong_username).style.display='inline'
            document.getElementById(el_username).style.borderColor='red'
            document.getElementById(el_username_msg).style.color='red'
            document.getElementById(el_username_msg).style.display='block'
        }else{     
            document.getElementById(el_right_username).style.display='inline'
            document.getElementById(el_wrong_username).style.display='none'
            document.getElementById(el_username).style.borderColor='green'
            document.getElementById(el_username_msg).style.display='none'
        }

    },
   
    //判断密码强弱
    checkPwd(){
    //定义默认值
    var modes=0;
    //清除输入框输入空格
    document.getElementById('password').value=document.getElementById('password').value.replace(/\s+/g,'');
    //输入时盒子显示
    if(this.password!==''){
        document.getElementById('passbox').style.display='flex';
    }
    if(this.password===''){
        document.getElementById('passbox').style.display='none';
    }
    //密码长度判断
    //小于等于4个字符串
    if(this.password.length<=4){
        modes=modes+2;
    }
    //5-7个字符串
    if(this.password.length>=5){
        modes=modes+5;
    }
    //大于等于8个字符串
    if(this.password.length>=8){
        modes=modes+10;
    }
    //密码字母判断
    //字母为小写
    if(/[a-z]/.test(this.password)){
        modes=modes+5;
    }
    //字母为大写
    if(/[A-Z]/.test(this.password)){
        modes=modes+5;
    }
    //密码数字判断
    var zu=this.password.match(/[0-9]/g);
    if(zu!=null){
        //只有一个数字
        if(zu.length<2){
            modes=modes+5;
        }
        ///大于一个数字
        if(zu.length>1){
            modes=modes+10;
        }
    }
    //符号判断
    var bu=this.password.match(/\W/g);
    if(bu!=null){
        //只有一个符号
        if(bu.length<2){
            modes=modes+5;
        }
        //大于一个符号
        if(bu.length>1){
            modes=modes+10;
        }
    }

    if(modes<20){
        document.getElementById('one').style.background='#F45A68',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=20&&modes<30){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#fc0',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=30&&modes<40){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#cc0',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=40){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#14B12F';
    }
    },
    checkPwd2(){
        if(this.password===null||this.password===''){
            this.pwd_msg='密码不能为空'
            document.getElementById('right_password').style.display='none'
            document.getElementById('wrong_password').style.display='inline'
            document.getElementById('password').style.borderColor='red'
            document.getElementById('pwd_msg').style.color='red'
        }else{   
            this.pwd_msg=null
            document.getElementById('right_password').style.display='inline'
            document.getElementById('wrong_password').style.display='none'
            document.getElementById('password').style.borderColor='green'
        }
    },
    checkRePwd(){
        if(this.rePassword===null||this.rePassword===''){
            this.repwd_msg='密码不能为空'
            document.getElementById('right_repeatedPassword').style.display='none'
            document.getElementById('wrong_repeatedPassword').style.display='inline'
            document.getElementById('repeatedPassword').style.borderColor='red'
            document.getElementById('repwd_msg').style.color='red'
        }else{
            if(this.password===this.rePassword){
                this.repwd_msg=null
            document.getElementById('right_repeatedPassword').style.display='inline'
            document.getElementById('wrong_repeatedPassword').style.display='none'
            document.getElementById('repeatedPassword').style.borderColor='green'
            } else{
                this.repwd_msg='密码不一致'
            document.getElementById('right_repeatedPassword').style.display='none'
            document.getElementById('wrong_repeatedPassword').style.display='inline'
            document.getElementById('repeatedPassword').style.borderColor='red'
            document.getElementById('repwd_msg').style.color='red'
            }   
           
        }
        }

  },
};
</script>
